<template>
    <el-header class="header">
        <div class="left-content site-logo">
            <img src="~@/assets/logo.png" alt="logo">
            <div class="site-name">睿云中台</div>
        </div> 

        <div class="right-content">
            <el-dropdown popper-class="drop-menu-wrap">
                <div class="nav-item">
                    <span class="name" v-if="userInfo.name">您好，{{ userInfo?.name }}！</span>
                    <img class="avatar" :src="userInfo?.avatar || require('@/assets/img/user-photo.png')" alt="">
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="modifyPwd">修改密码</el-dropdown-item>
                        <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </el-header>
</template>

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'

const store = useStore()

const userInfo = computed(() => {
    return store.state.currentUser
})

function logout() {
    store.dispatch('logout')
}

function modifyPwd () {
    store.commit('pwdModelValue', true)
}

</script>

<style lang="scss" scoped>
.header {
    height: 60px !important;
    line-height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 1px 2px 6px 0px rgb(48 91 137 / 10%);
    margin-bottom: 4px;

    .site-logo {
        position: relative;
        line-height: 70px;
        display: flex;
        align-items: center;
        height: 70px;
        // transition: all 0.2s ease;
        img {
            display: inline-block;
            height: 26px;
            vertical-align: middle;
        }
        .site-name {
            margin-left: 16px;
            margin-right: 30px;
            overflow: hidden;
            color: var(--main-text);
            font-weight: 500;
            font-size: 18px;
            line-height: 70px;
            animation: fade-in;
            animation-duration: .2s;
            white-space: nowrap;
            font-family: PingFangSC-Medium, PingFang SC;
            position: relative;
        }
    }
    .left-content,
    .right-content {
        display: flex;
        align-items: center;
    }
    .nav-item {
        display: flex;
        align-items: center;
        font-size: 14px;
        flex: none;
        cursor: pointer;
        &.disabled {
            cursor: not-allowed;
            color: $--font-color-disabled-base;
        }
    }
    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin: 12px 0 12px 12px;
    }
    .name {
        white-space: nowrap;
        color: var(--main-text);
    }
    .brand-select-wrap {
        :deep(.el-input__wrapper) {
            border-radius: 16px;
        }
    }
}
</style>

<style lang="scss">
.drop-menu-wrap {
    .exit-wrap {
        .exit-icon {
            width: 14px;
            height: 14px;
        }
    }
}
</style>
